<template>
  <div>
    <div>
      一级分类:
      <el-select v-model="category1Id" placeholder="请选择">
        <el-option
          v-for="item in category1"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-button @click="getCategory2ListByca1">确定</el-button>
      <el-button @click="category1From = true">添加一级分类</el-button>
      <el-button @click="eidtDialog = true">添加二级分类</el-button>
      <el-button @click="isCategory2 = false">清除筛选条件</el-button>

<!--      添加二级分类-->
      <el-dialog :visible.sync="eidtDialog" title="添加二级分类">
        <el-form>
          <el-table-column>
            <template>
              <el-select v-model="addCategory1Id" placeholder="请选择">
                <el-option
                  v-for="item in category1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column STYLE="margin-top: 10px">
            二级分类名:
            <el-input v-model="newCategory2"></el-input>
          </el-table-column>
        </el-form>
        <div style="margin-top: 10px">上传图片:</div>
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button @click="eidtDialog = false">取消</el-button>
          <el-button type="primary" @click="addCategory2">确 定</el-button>
        </div>
      </el-dialog>
<!--      添加一级分类表单-->
      <el-dialog :visible.sync="category1From">
        一级分类名:
        <el-input v-model="newCategory1"></el-input>
        <div style="margin-top: 10px">上传图片:</div>
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button @click="category1From = false">取消</el-button>
          <el-button type="primary" @click="addCategory1">确 定</el-button>
        </div>
      </el-dialog>
    </div>
<!--    一级分类表单-->
    <el-table :data="category1" style="width: 100%" v-if="!isCategory2">
      <el-table-column label="一级id" prop="id"></el-table-column>
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="图片">
        <template slot-scope="category1">
          <el-image :src="category1.row.imgUrl"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="category1">
          <el-button @click="deleteCa1(category1.row.id)" type="danger">删除</el-button>
          <el-button @click="updataCa1(category1.row)" type="info">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    二级分类表单-->
    <el-table :data="category2" style="width: 100%" v-if="isCategory2">
      <el-table-column label="id" prop="id"></el-table-column>
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="图片">
        <template slot-scope="category2">
          <el-image :src="category2.row.imgUrl"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="category2">
          <el-button @click="deleteCa2(category2.row.id)" type="danger">删除</el-button>
          <el-button @click="updataCa2(category2.row)" type="info">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {ApiService} from "@/api/apiService";
import {Ossutil} from "@/api/FileUploadUtil";

export default {
  name: 'BookItem',
  data() {
    return {
      updataCa2Show:false,
      isCategory2:false,
      category1:[],
      category2:[],
      category1Id:1,
      addCategory1Id:1,
      newCategory1:'',
      newCategory2:'',
      eidtDialog:false,
      category1From:false,
      imageUrl:'',
      caUpdate:{},
      isAdd:true,
      modifyCategory2Id:-1,
      modifyCategory1Id:-1,
    }
  },
  mounted() {
    this.getCategory1List()
  },
  methods:{
    //获取全部一级分类
    getCategory1List() {
      const api = new ApiService("/iteam/catalog1")
      api.get().then(res => {
        console.log(res.data)
        this.category1 = res.data.data;
        console.log(this.category1)
      })
    },
    updataCa2(category) {
      console.log(category)
      this.modifyCategory2Id = category.id;
      this.addCategory1Id = category.category1Id
      this.eidtDialog = true
      this.imageUrl = category.imgUrl
      this.newCategory2 = category.name
    },
    updataCa1(category) {
      console.log(category)
      this.modifyCategory1Id = category.id
      this.newCategory1 = category.name
      this.imageUrl = category.imgUrl
      this.category1From = true;
    },
    //删除一级分类
    deleteCa1(id) {
      console.log("删除"+id)
      const  api = new ApiService("/category1/delete")
      api.getParams({
        id:id
      }).then(res => {
        if(res.data.code == 200) {
          this.$notify({
            title:"成功",
            message:"删除成功"
          })
          this.getCategory1List();
        }
      })
    },
    //删除二级分类
    deleteCa2(id) {
      console.log("删除"+id)
      const  api = new ApiService("/category2/delete")
      api.getParams({
        id:id
      }).then(res => {
        if(res.data.code == 200) {
          this.$notify({
            title:"成功",
            message:"删除成功"
          })
          this.getCategory2ListByca1();
        }
      })
    },
    //根据一级分类id筛选二级分类
    getCategory2ListByca1() {
      const api = new ApiService("/category2/byCategory1")
      api.getParams({
        id:this.category1Id
      }).then(res => {
        console.log(res)
        this.category2 = res.data.data;
        this.isCategory2 =true;
      })
    },
    //添加/修改二级分类
    addCategory2() {
      if(this.modifyCategory2Id < 0) {
        const api = new ApiService("/category2/add")
        api.getParams({
          category1Id:this.addCategory1Id,
          name:this.newCategory2,
          imgUrl:this.imageUrl,
        }).then( res => {
          if(res != null) {
            this.eidtDialog = false
            this.getCategory1List();
            this.imageUrl=""
            this.$notify({
              message:"添加成功"
            })
          }
        })
      }
      if(this.modifyCategory2Id>0) {
        const api = new ApiService("/category2/update")
        api.getParams({
          id:this.modifyCategory2Id,
          category1Id:this.addCategory1Id,
          name:this.newCategory2,
          imgUrl:this.imageUrl,
        }).then( res => {
          if(res != null) {
            this.eidtDialog = false
            this.getCategory1List();
            this.imageUrl=""
            this.modifyCategory2Id = -1
            this.$notify({
              message:"修改成功"
            })
          }
        })
      }
    },
    //添加/修改一级分类
    addCategory1() {
      if(this.modifyCategory1Id<0) {
        const api = new ApiService("/category1/add")
        api.getParams({
          name:this.newCategory1,
          imgUrl:this.imageUrl,
        }).then( res => {
          if(res != null) {
            this.getCategory1List();
            this.category1From = false;
            this.imageUrl = ""
            this.$notify({
              message:"添加成功"
            })
          }
        })
      } else {
        const api = new ApiService("/category1/update")
        api.getParams({
          id:this.modifyCategory1Id,
          name:this.newCategory1,
          imgUrl:this.imageUrl,
        }).then( res => {
          if(res != null) {
            this.getCategory1List();
            this.category1From = false;
            this.modifyCategory1Id = -1;
            this.imageUrl = ""
            this.$notify({
              message:"修改成功"
            })
          }
        })
      }
    },
    //添加图片
    async beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      console.log(file);
      const oss = new Ossutil();

      let OSS = require('ali-oss');

      let client = new OSS({
        region: 'oss-cn-chengdu',
        accessKeyId: 'LTAI5tKbKKZo33r8EpDqgGWH',
        accessKeySecret: 'wPzuRowwhcB7brUAwDfTcEIo8hAnBI',
        bucket: 'jingzai-pethome',
      });
      //此时可以自行将文件上传至服务器
      try {
        console.log(new Date().getTime())
        var ti = new Date().getTime()
        let result = await client.put('/img/' + ti + '.jpg', file)
        console.log(result)
        console.log("图片" + result.url)
        this.imageUrl = result.url
      } catch (e) {
        console.log(e);
      }
    },
    //修改

  },
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
